<template>
  <div class="app-container">
    <list-page
      :total="total"
      :page-num.sync="searchForm.pageNum"
      :page-size.sync="searchForm.pageSize"
      @getList="getList"
    >
      <list-search slot="search" v-model="searchForm" @search="search">
        <el-form-item label="参数名称" prop="like.name">
          <el-input v-model="searchForm.like.name" placeholder="请输入参数名称" clearable @keyup.enter.native="search"/>
        </el-form-item>
        <el-form-item label="参数键名" prop="where.config_key">
          <el-input v-model="searchForm.where.config_key" placeholder="请输入参数键名" clearable @keyup.enter.native="search"/>
        </el-form-item>
        <el-form-item label="参数分组" prop="where.groups">
          <el-select v-model="searchForm.where.groups" placeholder="请选择分组" clearable class="w-120px">
            <el-option v-for="(item, index) in groupList" :key="index" :label="item" :value="item"/>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="time.create_time">
          <el-date-picker
            v-model="searchForm.time.create_time"
            style="width: 220px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
      </list-search>

      <template slot="actions">
        <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd" v-hasPerm="['system:config:add']">新增</el-button>
        <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete(selections)" v-hasPerm="['system:config:delete']" :disabled="!selections.length">删除</el-button>
        <el-button type="warning" plain icon="el-icon-download" @click="handleExport" v-hasPerm="['system:config:export']">导出</el-button>
        <el-button type="danger" plain icon="el-icon-refresh" @click="handleCache" v-hasPerm="['system:config:edit']">刷新缓存</el-button>
      </template>

      <el-table v-loading="loading" :data="listData" @selection-change="handleSelection">
        <el-table-column type="selection" :selectable="canSelect" align="center" width="50" />
        <el-table-column label="主键" align="center" prop="id" width="60" />
        <el-table-column label="参数名称" align="center" prop="name" show-overflow-tooltip min-width="150" />
        <el-table-column label="参数键" align="center" prop="config_key" show-overflow-tooltip min-width="150" />
        <el-table-column label="参数值" align="center" prop="value" show-overflow-tooltip min-width="150" />
        <el-table-column label="分组" align="center" prop="groups" show-overflow-tooltip min-width="80" />
        <el-table-column label="创建时间" align="center" prop="create_time" min-width="150">
          <template v-slot="{ row }">
            <span>{{ parseTime(row.create_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width" width="120">
          <template v-slot="{ row }">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(row)"
              v-hasPerm="['system:config:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(row)"
              v-hasPerm="['system:config:delete']"
              v-if="row.is_sys !== '1'"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </list-page>
    <config-form :module-name="moduleName" v-model="formShow" :row="formData" @submit="getList" v-if="formShow"/>
  </div>
</template>

<script>
import IndexList from '@/components/system/ListPage/list-index'
import { delConfigApi, listConfigApi, refreshCacheApi, exportConfigApi } from '@/api/system/config'
import ConfigForm from './form'

export default {
  name: "Config",
  mixins: [IndexList],
  components: { ConfigForm },
  data() {
    return {
      moduleName: '参数',
      groupList: [],
      searchForm: {
        like: { name: undefined },
        where: { config_key: undefined, type: undefined, groups: undefined },
        time: { create_time: [] },
      },
    };
  },
  created() {
    this.getList()
    this.groupOptions()
  },
  methods: {
    getList() {
      this.loading = true;
      listConfigApi(this.searchForm).then(res => {
          this.listData = res.list;
          this.total = res.total;
          this.loading = false;
        }
      );
    },
    groupOptions() {
      this.getConfig('sys.conf.group').then(val=>{
        this.groupList = val.split(';')
      })
    },
    toDelete(param) {
      return delConfigApi(param?.id || '')
    },
    canSelect(row) {
      return row.is_sys !== '1'
    },
    handleExport() {
      exportConfigApi(this.searchForm)
    },
    handleCache() {
      refreshCacheApi().then(() => this.$modal.msgSuccess("刷新成功"))
    }
  }
}
</script>
